import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { createAddPersonAtion } from '../../redux/actions/person'
 class Person extends Component {
    addPerson=()=>{
        const name=this.nameNode.value
        const age=this.ageNode.value
        const personObj={id:nanoid(),name,age}
        //console.log(personObj);
        this.props.addOnePerson(personObj)
        this.nameNode.value=''
        this.ageNode.value=''
    }
  render() {
    return (
      <div>
        <h2>我是Person组件</h2>
        <input ref={c=>this.nameNode=c} type="text" placeholder='姓名'/>
        <input ref={c=>this.ageNode=c} type="text" placeholder='年龄'/>
        <button onClick={this.addPerson}>添加</button>
        <ul>
            {this.props.persons.map(item=>{
                return <li key={item.id}>{item.name}---{item.age}</li>
            })}
        </ul>
        <h3>当前计数：{this.props.sum}</h3>
      </div>
    )
  }
}

export default connect(
    state=>({persons:state.personInfo,sum:state.sum}),
    {addOnePerson:createAddPersonAtion}
)(Person)